<template>
  <div class="login-container">
    <div class="login-background">
      <div class="background-gradient"></div>
      <div class="background-pattern"></div>
    </div>
    
    <div class="login-content">
      <div class="login-logo">
        <div class="logo-text">Violet IM</div>
        <div class="logo-subtitle">安全、高效的即时通讯平台</div>
      </div>

      <q-card class="login-card" :class="{ 'login-mode': activeTab === 'login', 'register-mode': activeTab === 'register' }">
        <q-card-section class="card-header">
          <q-tabs 
            v-model="activeTab" 
            class="custom-tabs"
            active-color="primary"
            indicator-color="primary"
            align="justify"
          >
            <q-tab name="login" label="登录" />
            <q-tab name="register" label="注册" />
          </q-tabs>
        </q-card-section>

        <q-card-section class="card-body">
          <q-tab-panels v-model="activeTab" animated>
            <q-tab-panel name="login" class="tab-panel">
              <q-form @submit="handleLogin" class="login-form" autocomplete="off">
                <q-input
                  v-model="loginForm.username"
                  placeholder="请输入用户名"
                  outlined
                  class="form-input"
                  autocomplete="off"
                  autocapitalize="off"
                  autocorrect="off"
                  spellcheck="false"
                  :rules="[val => !!val || '请输入用户名', val => val.length >= 2 || '用户名至少需要2个字符']"
                >
                  <template v-slot:prepend>
                    <q-icon name="person" />
                  </template>
                </q-input>
                
                <q-input
                  v-model="loginForm.password"
                  type="password"
                  placeholder="请输入密码"
                  outlined
                  class="form-input"
                  autocomplete="new-password"
                  autocapitalize="off"
                  autocorrect="off"
                  spellcheck="false"
                  :rules="[val => !!val || '请输入密码']"
                >
                  <template v-slot:prepend>
                    <q-icon name="lock" />
                  </template>
                </q-input>
                
                <q-btn
                  type="submit"
                  label="登录"
                  color="primary"
                  :loading="loading"
                  class="submit-btn"
                  unelevated
                  size="lg"
                />
              </q-form>
            </q-tab-panel>

            <q-tab-panel name="register" class="tab-panel">
              <q-form @submit="handleRegister" class="login-form" autocomplete="off">
                <q-input
                  v-model="registerForm.name"
                  placeholder="请输入用户名"
                  outlined
                  class="form-input"
                  autocomplete="off"
                  autocapitalize="off"
                  autocorrect="off"
                  spellcheck="false"
                  :rules="[val => !!val || '请输入用户名', val => val.length >= 2 || '用户名至少需要2个字符']"
                >
                  <template v-slot:prepend>
                    <q-icon name="person" />
                  </template>
                </q-input>
                
                <q-input
                  v-model="registerForm.email"
                  type="email"
                  placeholder="请输入邮箱地址"
                  outlined
                  class="form-input"
                  autocomplete="off"
                  autocapitalize="off"
                  autocorrect="off"
                  spellcheck="false"
                  :rules="[val => !!val || '请输入邮箱', val => /.+@.+\..+/.test(val) || '请输入有效的邮箱地址']"
                >
                  <template v-slot:prepend>
                    <q-icon name="email" />
                  </template>
                </q-input>
                
                <q-input
                  v-model="registerForm.phone"
                  type="tel"
                  placeholder="请输入手机号（可选）"
                  outlined
                  class="form-input"
                  autocomplete="off"
                  autocapitalize="off"
                  autocorrect="off"
                  spellcheck="false"
                  maxlength="11"
                  :rules="[
                    val => !val || val.length === 0 || /^1[3-9]\d{9}$/.test(val) || '请输入正确的手机号（11位数字，以1开头）'
                  ]"
                >
                  <template v-slot:prepend>
                    <q-icon name="phone" />
                  </template>
                </q-input>
                
                <q-input
                  v-model="registerForm.password"
                  type="password"
                  placeholder="请输入密码（至少6位）"
                  outlined
                  class="form-input"
                  autocomplete="new-password"
                  autocapitalize="off"
                  autocorrect="off"
                  spellcheck="false"
                  :rules="[val => !!val || '请输入密码', val => val.length >= 6 || '密码至少需要6位']"
                >
                  <template v-slot:prepend>
                    <q-icon name="lock" />
                  </template>
                </q-input>
                
                <q-input
                  v-model="registerForm.confirmPassword"
                  type="password"
                  placeholder="请再次输入密码"
                  outlined
                  class="form-input"
                  autocomplete="new-password"
                  autocapitalize="off"
                  autocorrect="off"
                  spellcheck="false"
                  :rules="[val => !!val || '请再次输入密码', val => val === registerForm.password || '两次输入的密码不一致']"
                >
                  <template v-slot:prepend>
                    <q-icon name="lock_outline" />
                  </template>
                </q-input>
                
                <q-btn
                  type="submit"
                  label="注册"
                  color="primary"
                  :loading="loading"
                  class="submit-btn"
                  unelevated
                  size="lg"
                />
              </q-form>
            </q-tab-panel>
          </q-tab-panels>
        </q-card-section>
      </q-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, nextTick, watch } from 'vue';
import { useLogin } from './Login';

const emit = defineEmits<{
  'login-success': [user: any];
}>();

// 使用业务逻辑
const {
  activeTab,
  loading,
  loginForm,
  registerForm,
  handleLogin: handleLoginInternal,
  handleRegister: handleRegisterInternal,
} = useLogin();

// 禁用所有输入框的自动补全、自动大写和自动纠错
const disableAutoComplete = () => {
  nextTick(() => {
    const inputs = document.querySelectorAll('.form-input input');
    inputs.forEach((input: Element) => {
      const htmlInput = input as HTMLInputElement;
      htmlInput.setAttribute('autocomplete', 'off');
      htmlInput.setAttribute('autocapitalize', 'off');
      htmlInput.setAttribute('autocorrect', 'off');
      htmlInput.setAttribute('spellcheck', 'false');
      // 对于密码字段，使用 new-password
      if (htmlInput.type === 'password') {
        htmlInput.setAttribute('autocomplete', 'new-password');
      }
    });
  });
};

onMounted(() => {
  disableAutoComplete();
  // 监听 tab 切换，确保新显示的输入框也禁用自动补全
  const observer = new MutationObserver(() => {
    disableAutoComplete();
  });
  const formElement = document.querySelector('.login-form');
  if (formElement) {
    observer.observe(formElement, { childList: true, subtree: true });
  }
});

// 监听标签切换，确保切换后也禁用自动补全
watch(activeTab, () => {
  setTimeout(() => {
    disableAutoComplete();
  }, 100);
});

// 处理登录
const handleLogin = async () => {
  try {
    const result = await handleLoginInternal();
    if (result) {
      emit('login-success', result.user);
    }
  } catch (error) {
    // 错误已在 handleLoginInternal 中处理
  }
};

// 处理注册
const handleRegister = async () => {
  try {
    await handleRegisterInternal();
  } catch (error) {
    // 错误已在 handleRegisterInternal 中处理
  }
};
</script>

<style lang="sass" scoped>
.login-container
  position: relative
  display: flex
  align-items: center
  justify-content: center
  height: 100vh
  overflow: hidden
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif

.login-background
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0
  z-index: 0

.background-gradient
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0
  background: #e8f0ff
  opacity: 1

.background-pattern
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0
  background-image: radial-gradient(circle at 20% 30%, rgba(120, 80, 200, 0.12) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(60, 120, 200, 0.15) 0%, transparent 50%), radial-gradient(circle at 50% 50%, rgba(120, 80, 200, 0.08) 0%, transparent 60%), linear-gradient(0deg, transparent 24%, rgba(120, 80, 200, 0.04) 25%, rgba(120, 80, 200, 0.04) 26%, transparent 27%, transparent 74%, rgba(60, 120, 200, 0.04) 75%, rgba(60, 120, 200, 0.04) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(120, 80, 200, 0.04) 25%, rgba(120, 80, 200, 0.04) 26%, transparent 27%, transparent 74%, rgba(60, 120, 200, 0.04) 75%, rgba(60, 120, 200, 0.04) 76%, transparent 77%, transparent)
  background-size: 100% 100%, 100% 100%, 100% 100%, 50px 50px, 50px 50px
  animation: patternMove 25s ease-in-out infinite

@keyframes patternMove
  0%, 100%
    transform: translate(0, 0) scale(1)
    opacity: 1
  50%
    transform: translate(-15px, -15px) scale(1.05)
    opacity: 0.95

.login-content
  position: relative
  z-index: 1
  width: 100%
  max-width: 480px
  padding: 20px 20px
  height: 100vh
  display: flex
  flex-direction: column
  justify-content: center
  align-items: center
  overflow: hidden
  padding-top: 10vh

.login-logo
  text-align: center
  margin-bottom: 24px
  color: #ffffff
  flex-shrink: 0

.logo-text
  font-size: 32px
  font-weight: 700
  letter-spacing: 1px
  margin-bottom: 6px
  color: #ffffff
  text-shadow: 0 2px 8px rgba(120, 80, 200, 0.4), 0 0 20px rgba(120, 80, 200, 0.2)

.logo-subtitle
  font-size: 14px
  font-weight: 400
  color: rgba(255, 255, 255, 0.85)
  letter-spacing: 0.5px
  opacity: 0.9

.login-card
  background: rgba(255, 255, 255, 0.95)
  backdrop-filter: blur(24px) saturate(180%)
  border-radius: 20px
  border: 1px solid rgba(255, 255, 255, 0.4)
  box-shadow: 0 8px 32px rgba(124, 58, 237, 0.08), 0 2px 8px rgba(59, 130, 246, 0.06)
  display: flex
  flex-direction: column
  overflow: hidden
  width: 100%
  min-height: 0
  
  // 登录模式 - 更紧凑的高度，固定高度
  &.login-mode
    flex: 0 0 auto
    height: auto
    max-height: 400px
  
  // 注册模式 - 更高的高度，填充剩余空间，可以滚动
  &.register-mode
    flex: 1
    min-height: 0
    max-height: 100%
  
  :deep(.q-card__section)
    overflow: visible

.card-header
  padding: 0
  background: transparent

.custom-tabs
  :deep(.q-tabs__content)
    padding: 0 20px

  :deep(.q-tab)
    font-size: 15px
    font-weight: 600
    color: #94a3b8
    padding: 12px 20px
    text-transform: none
    letter-spacing: 0.3px
    transition: all 0.3s ease

    &:hover
      color: #7c3aed

  :deep(.q-tab--active)
    color: #7c3aed

  :deep(.q-tabs__indicator)
    height: 3px
    border-radius: 2px
    background: linear-gradient(135deg, #7c3aed 0%, #6366f1 50%, #3b82f6 100%)

.card-body
  padding: 16px 24px 20px
  overflow-y: auto
  overflow-x: hidden
  flex: 1
  min-height: 0
  display: flex
  flex-direction: column
  
  // 登录模式时调整内边距，顶部留更多空间
  .login-card.login-mode &
    padding: 24px 24px 16px
    flex: 0 1 auto
  
  &::-webkit-scrollbar
    width: 6px
    
  &::-webkit-scrollbar-track
    background: transparent
    
  &::-webkit-scrollbar-thumb
    background: rgba(0, 0, 0, 0.2)
    border-radius: 3px
    
    &:hover
      background: rgba(0, 0, 0, 0.3)

.tab-panel
  padding: 0
  overflow: visible
  display: flex
  flex-direction: column
  min-height: 0

.login-form
  display: flex
  flex-direction: column
  gap: 12px
  min-height: min-content
  padding-bottom: 8px

// 登录页面特殊优化 - 减少留白，让表单居中显示
.login-card.login-mode .card-body
  justify-content: center

.login-card.login-mode .tab-panel
  justify-content: center
  flex: 0 1 auto
  min-height: auto

.form-input
  flex-shrink: 0
  :deep(.q-field__control)
    border-radius: 10px
    border: 2px solid rgba(226, 232, 240, 0.8)
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)
    background: rgba(248, 250, 252, 0.8)
    min-height: 44px

  :deep(.q-field--focused .q-field__control)
    border-color: #7c3aed
    background: rgba(255, 255, 255, 0.95)
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12), 0 2px 8px rgba(124, 58, 237, 0.08)

  :deep(.q-field__label)
    font-size: 13px
    font-weight: 500
    color: #6b7280
    margin-left: 8px

  :deep(.q-field__native)
    font-size: 14px
    color: #1f2937
    padding: 8px 14px
    min-height: 44px

  :deep(.q-field__prepend)
    padding-left: 14px
    color: #94a3b8
    transition: color 0.3s ease

  :deep(.q-field--focused .q-field__prepend)
    color: #7c3aed

.submit-btn
  margin-top: 2px
  height: 44px
  border-radius: 10px
  font-size: 15px
  font-weight: 600
  letter-spacing: 0.5px
  background: linear-gradient(135deg, #7c3aed 0%, #6366f1 50%, #3b82f6 100%)
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.35), 0 2px 8px rgba(59, 130, 246, 0.2)
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)
  flex-shrink: 0

  &:hover
    transform: translateY(-2px)
    box-shadow: 0 6px 24px rgba(124, 58, 237, 0.45), 0 4px 12px rgba(59, 130, 246, 0.25)
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 50%, #6366f1 100%)

  &:active
    transform: translateY(0)
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3)

  :deep(.q-btn__content)
    text-transform: none
</style>

